<template>
  <div class="xinde">
    <div class="name" v-for="suibian in 2">
      <div class="head">
        <img src="../../../assets/3king/断货王商品详情/headImg.png" alt="">
        <span class="h-1">昵称</span>
        <span class="h-2">2017-06-28</span>
      </div>
      <p>
        该模块主要内容是顾客对购买的商品的评价...该模块主要内容是
        顾客对购买的商品的评价...
      </p>
      <div class="bili">
        <img src="../../../assets/3king/断货王商品详情/product1.png" alt="">
        <span class="bili-bang">该地方是客人上传的图片</span>
      </div>
      <div class="zan">
        <div class="share-one">
          <img src="../../../assets/3king/全部心得/zan.png" alt="">
          <span>1</span>
        </div>
        <div class="share-two">
          <img src="../../../assets/3king/全部心得/comment.png" alt="">
          <span>10</span>
        </div>
        <div class="share-three">
          <img src="../../../assets/3king/全部心得/share.png" alt="">
          <span>26</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
</script>
<style scoped>
 .name{
   background: white;
   margin: auto;
   padding: 0.5rem;
   margin-bottom: 0.53rem;
 }
  .head img{
    width: 1.5rem;
  }
  .head{
    overflow: hidden;
  }
  .h-1{
    font-size: 0.62rem;
    margin-left: 0.53rem;
  }
  .h-2{
    font-size: 0.53rem;
    float: right;
    margin-right: 0.53rem;
    margin-top: 0.44rem;
    color: #808080;
  }
  p{
    font-size: 0.53rem;
    margin-top: 0.53rem;
    color: #808080;
  }
  .zan{
    display: flex;
    text-align: center;
    margin-top: 2rem;
  }
  .zan img{
    width: 0.53rem;
    vertical-align: -0.02rem;
  }
  .zan span{
    margin-left: 0.2rem;
    font-size: 0.53rem;
    color: #808080;
  }
  .share-one{
    flex: 1;
    border-right: 1px solid gainsboro;
  }
  .share-two{
    flex: 1;
    border-right: 1px solid gainsboro;
  }
  .share-three{
    flex: 1;
  }
  .bili{
    margin: 1rem 0 1rem 1rem;
  }
  .bili img{
    width: 1.38rem;
    font-size: 0;
  }
</style>
